<template>
    <div>
        <el-form :model="loginForm" :rules="fieldRules" ref="dataForm" label-position="left" label-width="0px"
                 class="demo-ruleForm login-container">
            <span class="tool-bar"></span>
            <h2 class="title" style="padding-left:22px;">系统登录</h2>
            <el-form-item prop="username">
                <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号，支持邮箱地址作为账号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-col :span="12">
                    <el-form-item prop="captcha">
                        <el-input type="test" v-model="loginForm.captcha" auto-complete="off" placeholder="验证码, 单击图片刷新"
                                  style="width: 100%;">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col class="line" :span="1">&nbsp;</el-col>
                <el-col :span="11">
                    <el-form-item>
                        <img style="width: 100%;" class="pointer" :src="captchaImgSrc" @click="refreshCaptcha">
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item style="width:100%;" class="ly-button-center">
                <el-button type="primary" style="width:40%;" @keyup.enter.native="login('loginForm')"
                           @click.native.prevent="login('loginForm')" :loading="loading">
                    登 录
                </el-button>
                <el-button type="primary" style="width:40%;" @click.native.prevent="reset">重 置</el-button>
            </el-form-item>
            <div class="login-tips">
                <el-button type="text" @click="$router.push({ path: '/register' })">没有账号？开始注册</el-button>
                <el-button type="text" @click="$router.push({ path: '/login/email' })">邮箱验证码登录</el-button>
            </div>
        </el-form>
    </div>
</template>

<script>
    import Cookies from "js-cookie"
    import {getUUID} from "@/utils"

    export default {
        name: 'Login',
        data() {
            return {
                loading: false,
                loginForm: {
                    username: '',
                    password: '',
                    uuid: '',
                    captcha: '',
                },
                captchaImgSrc: "",
                fieldRules: {
                    username: [
                        {required: true, message: '请输入账号', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ],
                    captcha: [
                        {required: true, message: '请输入验证码', trigger: 'blur'}
                    ]
                },
                checked: true
            }
        },
        methods: {
            login(formName) {
                this.loading = true
                this.$refs['dataForm'].validate((valid) => {
                    if (!valid) {
                        this.loading = false
                        return false;
                    }

                    this.$api.Login.login(this.loginForm).then((res) => {  // 调用登录接口

                        if(res.code == 0) {
                            //设置cookie 两小时后过期
                            var millisecond = new Date().getTime();
                            var expiresTime = new Date(millisecond + 2 * 60 * 60 * 1000);
                            Cookies.set('token', res.token, {
                                expires: expiresTime,
                            });

                            this.$router.push('/sys')  // 登录成功，跳转到主页
                        }else{
                            this.$message({message: res.msg, type: 'error'});
                            this.refreshCaptcha();
                        }
                        this.loading = false
                    })
                });
            },

            refreshCaptcha: function () {
                this.loginForm.uuid = getUUID();
                this.captchaImgSrc = `${this.global.baseUrl}/captcha.jpg?uuid=${this.loginForm.uuid}`;
            },

            reset() {
                this.$refs['dataForm'].resetFields()
            }
        },
        mounted() {
            //带入注册的用户密码
            this.loginForm.username = this.$route.query.username;
        },
        created() {
            var _self = this
            document.onkeydown = function (e) {
                var key = window.event.keyCode
                if (key === 13) {
                    _self.login('loginForm')
                    console.log(e);
                }
            }
            this.refreshCaptcha();
        },
        destroyed() {
            document.onkeydown = undefined;
        }
    }
</script>


<style scoped>
    .login-container {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        background-clip: padding-box;
        margin: 20px auto;
        width: 280px;
        padding: 35px 15px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }

    .login-container .title {
        margin: 0px auto 30px auto;
        text-align: center;
        color: #505458;
    }

    .login-container .ly-button-center {
        text-align: center;
    }
</style>